<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button
    class="navbar-toggler"
    type="button"
    data-toggle="collapse"
    data-target="#navbarSupportedContent"
    aria-controls="navbarSupportedContent"
    aria-expanded="false"
    aria-label="Toggle navigation"
  >
    <span class="navbar-toggler-icon"></span>
  </button>

  <div id="navbarSupportedContent" class="collapse navbar-collapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="home">Home</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="lazy">Lazy</a>
      </li>
      <!--      <li class="nav-item" routerLinkActive="active">-->
      <!--        <a class="nav-link" routerLink="lazy-scope-alias">Lazy scope alias</a>-->
      <!--      </li>-->
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="scope-sharing">Scope Sharing</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="inline-loaders">Inline Loaders</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="dynamic-translation"
          >Dynamic Translation</a
        >
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="multilangs">Multi Langs</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="transpilers">Transpilers</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="locale">Locale</a>
      </li>
    </ul>
  </div>

  <div class="d-flex justify-content-between align-items-center">
    <div class="lang-btns">
      <button
        *ngFor="let lang of availableLangs"
        [attr.data-cy]="lang.id"
        class="btn my-2 my-sm-0"
        style="margin-right: 10px"
        (click)="change(lang.id)"
        [class.btn-primary]="activeLang === lang.id"
        [class.btn-secondary]="activeLang !== lang.id"
      >
        {{ lang.label }}
      </button>
    </div>
  </div>
</nav>

<div class="container">
  <router-outlet></router-outlet>
</div>
